import { Image, View } from '@tarojs/components';

import { GetUserInfo } from '@/api/user';
import useRole from '@/hooks/useRole';
import { Skeleton } from '@antmjs/vantui';
import Taro from '@tarojs/taro';
import { useRequest, useRouter } from 'taro-hooks';
import { RoleType } from 'types/user';
import styles from './index.module.less';

const list = [
  {
    pagePath: '/pages/index/index',
    iconActivePath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-1.png',
    iconPath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-1-default.png',
    text: '服务场景',
  },
  {
    pagePath: '/pages/activity/index',
    iconActivePath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-activity.png',
    iconPath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-activity-default.png',
    text: '活动列表',
  },
  {
    pagePath: '/pages/professional/index',
    iconActivePath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-2.png',
    iconPath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-2-default.png',
    text: '专家服务',
  },
  {
    pagePath: '/pages/my/index',
    iconActivePath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-3.png',
    iconPath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-3-default.png',
    text: '个人中心',
  },
];

const ExpertRouters = [
  {
    pagePath: '/pages/expert/appointment/index',
    iconActivePath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-2.png',
    iconPath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-2-default.png',
    text: '预约咨询',
  },
  {
    pagePath: '/pages/expert/user/index',
    iconActivePath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-3.png',
    iconPath:
      'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/tabbar-3-default.png',
    text: '个人中心',
  },
];

const RoleRouterMap = {
  [RoleType.用户]: list,
  [RoleType.专家]: ExpertRouters,
  [RoleType.合伙人]: ExpertRouters,
};

export default function CustomTabBar() {
  const [routerInfo] = useRouter();
  const { role, update: updateRole } = useRole();

  const { loading } = useRequest(GetUserInfo, {
    cacheKey: 'get:user:info',
    onSuccess: function (data) {
      data?.role && updateRole(data.role);
      data?.token && Taro.setStorageSync('token', data.token);
    },
  });

  if (loading) return <Skeleton title={false} row={1} />;
  return (
    <>
      <View className={styles.tabBarContainer}>
        {RoleRouterMap[role]?.map((item, index) => {
          return (
            <View
              key={index}
              className={styles.tabBarItem}
              onClick={() => {
                Taro.switchTab({
                  url: item.pagePath,
                });
              }}
            >
              <Image
                src={
                  routerInfo.path === item.pagePath
                    ? item.iconActivePath
                    : item.iconPath
                }
                className={styles.tabBarIcon}
              />
              <View
                style={{
                  color:
                    routerInfo.path === item.pagePath ? '#004295' : 'inherit',
                }}
              >
                {item.text}
              </View>
            </View>
          );
        })}
      </View>
    </>
  );
}
